<!--
* @Author: zhangjing
* @Date: 2025-06-05 14:12:54
* @Description: 签到=>
-->
<template>
	<div class="pannel" style="margin: 0 120px; width: auto">
		<div class="cardbox flex flex-v">
			<div class="bind-con">
				<div class="bind-hd">
					<span class="class">{{ formData.className }}</span>
					<span style="margin-left: 40px">
						签到人数：
						<span class="hasBindValue">{{ signInNum }}</span>
						/{{ studentList.length }}
					</span>
					<span style="margin-left: 40px" v-if="machineData.machId">
						接收器{{ machineData.machId }}：
						<span :class="[machineData.online == 1 ? 'connect' : 'no-connect']">{{
							machineData.online == 1 ? '已连接' : '未连接'
						}}</span>
					</span>
				</div>
				<div class="bind-bd" style="width: 100%">
					<div class="list">
						<div style="height: calc(100% - 40px); overflow: auto; padding: 0 20px">
							<div class="sign-con">
								<div
									v-for="(item, index) in signUserList"
									class="sign-item flex flex-v flex-align-center"
									:class="{
										bigtosmall: item.status == 1,
									}"
								>
									<img src="/impromptu/gou.png" v-if="item.status == '0'" />
									<img src="/impromptu/gou_selected.png" v-else />
									{{ item.studName }}
								</div>
							</div>
							<div class="tips" v-if="isSignIn">
								请按
								<b class="high">“FN+OK键”</b>
								进行签到
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
		</div>
		<!-- <div class="conbox-ft flex flex-align-center flex-pack-justify">
			<div @click="toggleSign" class="ft-btn save-btn" :class="{ red: isSignIn }">
				{{ isSignIn ? '停止签到' : '开始签到' }}
			</div>
		</div> -->
		<div class="topicType">
			<img :src="`/impromptu${isPro ? '_pro' : ''}/topicType.png`" class="img" />
			<span class="name">签到</span>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

import bus from '@/utils/eventBus';
import { debounce } from '@/utils/base.js';
export default {
	name: 'signin',
	components: {},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			isExpand: false, //控制台默认不展开
			testType: '',
			isSignIn: false,
			newstuList: this.studentList,
			signUserList: [],
			signInId: '',
			csId: '',
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
		let signInInfo = this.$ls.get('signInInfo') || {};
		if (signInInfo.signInId && signInInfo.csId == this.csId) {
			this.signInId = signInInfo.signInId;
		}
		this.isSignIn = !!this.signInId;
		if (this.signInId) {
			this.WEBSOCKET_SEND({ fun: 'sign_in_start' });
			//下课的时候统一处理停止指令
			if (!this.stopDeviceEventList.includes('sign_in_stop')) {
				let eventlist = this.stopDeviceEventList || [];
				eventlist.push('sign_in_stop');
				this.SET_STOPDEVICEEVENTLIST(eventlist);
			}
			this.getSignInInfoById();
		} else {
			/* 再次查询一次课程最后一次签到记录 */
			this.findLastSignIn();
		}
		this.addOpr();
	},
	watch: {
		studentList: {
			handler(newValue, oldValue) {
				//监听学生名单，状态变化，同步给后端
				if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					if (this.signInId) {
						this.getSignInInfoById();
					} else {
						let list = [],
							signIds = [];
						if (this.signUserList && this.signUserList.length > 0) {
							signIds = this.signUserList
								.filter((item) => item.status == 1)
								.map((item) => item.machineId);
						}
						if (newValue && newValue.length > 0) {
							newValue.forEach((item) => {
								let info = {
									studName: item.studName,
									machineId: item.machineId,
									studId: item.studId,
									status: 0,
								};
								if (signIds && signIds.length > 0 && signIds.includes(item.machineId)) {
									info.status = 1;
								}
								list.push(info);
							});
						}
						list = list.sort((a, b) => {
							return b.status - a.status;
						});
						console.log('list', list);
						this.signUserList = [...list];
						//this.startSign();
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),

		//绑定学生人数
		signInNum() {
			let list = [];
			if (this.signUserList && this.signUserList.length > 0) {
				list = this.signUserList.filter((item) => item.status == '1');
			}
			return list.length;
		},
	},

	methods: {
		...mapMutations(['WEBSOCKET_SEND', 'SET_studentList', 'SET_STOPDEVICEEVENTLIST']),
		/* 开始绑定/停止绑定 */
		toggleSign() {
			if (!this.isSignIn) {
				this.startSign();
			} else {
				this.endSign();
			}
		},

		//开始签到
		startSign() {
			//左侧菜单需要用的数据
			if (this.deviceType == 'wired') {
				if (!this.isSignIn) {
					this.$postAction(this.$sysManageapi.answerUrl.startSignIn + '?csId=' + this.csId).then((da) => {
						this.signInId = da.data;
						this.$ls.set('signInInfo', {
							signInId: this.signInId,
							csId: this.csId,
						});
						this.isSignIn = true;
						this.WEBSOCKET_SEND({ fun: 'sign_in_start' });
						//下课的时候统一处理停止指令
						if (!this.stopDeviceEventList.includes('sign_in_stop')) {
							let eventlist = this.stopDeviceEventList || [];
							eventlist.push('sign_in_stop');
							this.SET_STOPDEVICEEVENTLIST(eventlist);
						}
						this.$message.success('请按“FN+OK键”进行签到');
					});
				}
			}
		},
		//停止签到
		endSign() {
			// let leftOperateData = this.$ls.get('leftOperateData');
			if (this.deviceType == 'wired') {
				this.$postAction(this.$sysManageapi.answerUrl.endSignIn + '?signInId=' + this.signInId).then((da) => {
					this.signInId = '';
					this.$ls.remove('signInInfo');
					this.WEBSOCKET_SEND({ fun: 'sign_in_stop' });
					this.isSignIn = false;
					let stopDeviceEventList = [...this.stopDeviceEventList];
					stopDeviceEventList = stopDeviceEventList.filter((item) => item != 'sign_in_stop');
					this.SET_STOPDEVICEEVENTLIST(stopDeviceEventList);
				});
			}
		},

		//返回
		reback() {
			/* 判断是否已经停止签到*/
			// if (this.isSignIn) {
			// 	this.endSign();
			// }
			this.$emit('checkMenu', { type: 'signin' });
		},

		getSignInInfoById() {
			this.$postAction(this.$sysManageapi.answerUrl.getSignInInfoById + '?signInId=' + this.signInId).then(
				(res) => {
					let list = [],
						signIds = [];
					if (res.data && res.data.signInContentDtoList.length > 0) {
						signIds = res.data.signInContentDtoList.map((item) => item.studId);
					}
					if (this.studentList && this.studentList.length > 0) {
						this.studentList.forEach((item) => {
							let info = {
								studName: item.studName,
								machineId: item.machineId,
								studId: item.studId,
								status: 0,
							};
							if (signIds && signIds.length > 0 && signIds.includes(item.studId)) {
								info.status = 1;
							}
							list.push(info);
						});
					}
					list = list.sort((a, b) => {
						return b.status - a.status;
					});
					console.log('list', list);
					this.signUserList = [...list];
				}
			);
		},
		findLastSignIn() {
			this.$postAction(this.$sysManageapi.answerUrl.findLastSignIn + '?csId=' + this.csId).then((res) => {
				if (res.data && res.data.signInid) {
					this.signInId = res.data.signInid;
					this.$ls.set('signInId', this.signInId);
					this.isSignIn = true;
					this.WEBSOCKET_SEND({ fun: 'sign_in_start' });
					//下课的时候统一处理停止指令
					if (!this.stopDeviceEventList.includes('sign_in_stop')) {
						let eventlist = this.stopDeviceEventList || [];
						eventlist.push('sign_in_stop');
						this.SET_STOPDEVICEEVENTLIST(eventlist);
					}
					this.$message.success('请按“FN+OK键”进行签到');
					let list = [],
						signIds = [];
					if (res.data && res.data.signInContentDtoList.length > 0) {
						signIds = res.data.signInContentDtoList.map((item) => item.studId);
					}
					if (this.studentList && this.studentList.length > 0) {
						this.studentList.forEach((item) => {
							let info = {
								studName: item.studName,
								machineId: item.machineId,
								studId: item.studId,
								status: 0,
							};
							if (signIds && signIds.length > 0 && signIds.includes(item.studId)) {
								info.status = 1;
							}
							list.push(info);
						});
					}
					list = list.sort((a, b) => {
						return b.status - a.status;
					});
					this.signUserList = [...list];
				} else {
					this.startSign();
				}
			});
		},
		updateList(info) {
			let list = [...this.signUserList];
			list.forEach((item) => {
				if (item.studId == info.studId) {
					item.status = 1;
				}
			});
			list = list.sort((a, b) => {
				return b.status - a.status;
			});
			this.signUserList = [...list];
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				opType: 'signin',
				userId: this.userinfo.userId,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.pageView {
	width: 100%;
	height: 100vh;
}
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	// padding: 50px 0 30px;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 15px;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.bind-con {
	height: calc(100vh - 100px);
	background: rgb(255, 255, 255);
	border-radius: 8px;
}

.bind-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	margin-top: 30px;

	.class {
		letter-spacing: -1px;
	}

	.sign {
		margin: 0 40px;
	}

	.no-connect {
		color: @warning-color;
	}

	.connect {
		color: @primary-color;
	}
}

.bind-bd {
	width: 1162px;
	height: calc(100% - 92px);
	margin: 30px auto 0;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}

	.bind-ft {
		position: absolute;
		bottom: 0;
		left: -5px;
		right: 0;

		.bg {
			width: 231px;
			height: 79px;
		}

		.operate {
			position: absolute;
			right: 60px;
			bottom: 30px;
			font-size: 22px;
			color: #4d5053;
			cursor: pointer;
			background-color: #fff;

			img {
				width: 24px;
				height: 24px;
				margin-right: 12px;
			}
		}
	}

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;

		.sign-con {
			display: grid;
			grid-template-columns: repeat(10, calc((100% - 200px) / 10));
			row-gap: 25px;
			column-gap: 20px;
			line-height: 1;
			height: 0;
			.sign-item {
				color: #2e2424;
				font-size: 24px;
				img {
					width: 60px;
					height: 60px;
				}
			}
			@media screen and (max-width: 1366px) {
				column-gap: 10px;
				grid-template-columns: repeat(8, calc((100% - 80px) / 8));
			}
		}
	}
}
.tips {
	position: absolute;
	bottom: 22px;
	left: 30px;
	right: 30px;
	text-align: center;
	font-size: 20px;
	color: #242424;
	font-weight: bold;
	z-index: 9;
	background-color: #fff;
	padding-bottom: 30px;
	.high {
		color: @primary-color;
	}
}
.conbox-ft {
	width: 1162px;
	margin: 35px auto 0;
	padding: 10px 0;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343;
			border-color: rgba(230, 67, 67, 0.5);
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
</style>

<style scoped>
.sign-item.bigtosmall {
	-webkit-animation: bigtosmall 1s ease forwards;
	opacity: 1;
}
@keyframes bigtosmall {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	70% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes bigtosmall {
	0% {
		-webkit-transform: scale(0.1);
		opacity: 0;
	}
	70% {
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
</style>
